<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>js如何将选中文件转换成Base64字符串</title>
</head>

<body>
    <script>
        function previewFile() {
            //获取显示图片对象
            var preview = document.getElementById("showImg");   // 通过元素节点查找： document.querySelector('img');
            //获取选中图片对象（包含文件的名称、大小、类型等，如file.size）
            var file = document.getElementById("chkFile").files[0];   //document.querySelector('input[type=file]').files[0];
            //声明js的文件流
            var reader = new FileReader();
            if (file) {
                //通过文件流将文件转换成Base64字符串
                reader.readAsDataURL(file);
                //转换成功后
                reader.onloadend = function () {
                    //将转换结果赋值给img标签
                    preview.src = reader.result;
                    //输出结果    
                    console.log(reader.result);
                    document.getElementById("showText").value = reader.result;
                }
            }
            else {
                preview.src = "";
            }
        }

    </script>

    <h2>选择图片：</h2>
    <input id="chkFile" type="file" onchange="previewFile()"><br />
    <img id="showImg" src="" height="200" alt="图片 预览..."> <br />
    <h2>转换结果：</h2>
    <textarea id="showText" style="width:400px;height:300px;"></textarea>
</body>

</html>